<template>
  <div class="page-container">

    <!-- 背景地图 -->
    <div class="background-map">
      <Map3D />
    </div>

    <!-- 页面内容 -->
    <div class="eco-produce-container">
      <!-- 大标题 -->

      <!-- 三列布局 -->
      <div class="three-columns-layout">
        <!-- 左侧一列（放置一个 ECharts） -->
        <div class="column-left">
          <border-title title="乡镇生态价值排名">
            <bar0103/>
          </border-title>

        </div>

        <!-- 中间空白列 -->
        <div class="column-middle">
          <div class="title-section">
            {{ homepageStore.year }}年铅山县GEP {{ formattedGep.formattedValue.toFixed(2) }}{{ formattedGep.unit }}
          </div>

        </div>

        <!-- 右侧一列（放置三个竖向 ECharts） -->
        <div class="column-right">
          <div class="right-chart-item">
            <border-title title="VEP项目">
              <rotating-chart/>
            </border-title>
          </div>

          <div class="right-chart-item">
            <border-title title="生态产品价值占比">
              <Pie3D />
            </border-title>

          </div>

          <div class="right-chart-item">
            <border-title title="乡镇生态产品价值">
              <bar02 />
            </border-title>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import Map3D from "@/views/regionalPublicBrand/threeMap/map/map3D.vue";
import RotatingChart from "@/views/homepageThree/components/rotatingChart.vue";
import Bar02 from "@/views/homepageThree/components/bar02.vue";
import Pie3D from "@/views/homepageThree/components/pie3D.vue";
import {onBeforeMount, computed} from 'vue';
import BorderTitle from "@/views/homepage/dashBoardComponents/other/BorderTitle.vue";
import getHomepageData from "api/services/homepageService";
import { useHomepageStore } from '@/stores/homepage';
import Bar0103 from "@/views/homepageThree/components/bar01-03.vue";
import {formatValueWithUnit} from "api/vepApi";

// 使用 homepage store
const homepageStore = useHomepageStore();

// 从 store 中获取数据
const fetchData = async (year: number) => {

  try {
    homepageStore.setDataLoading(true);
    const chartDataHome = await getHomepageData(year, homepageStore.district);

    // 将数据存储到 store 中
    homepageStore.setChartData(chartDataHome);

  } catch (error) {
    console.error('数据加载失败:', error);
    homepageStore.setDataLoading(false);
  }
};

const formattedGep = computed(() => {
  const { formattedValue, unit } = formatValueWithUnit(homepageStore.gepValue);
  return { formattedValue, unit };
});

onBeforeMount(async () => {
      await homepageStore.initializeYear();
      await homepageStore.fetchVepResults();
      await homepageStore.fetchGepResults();
      // await fetchData(homepageStore.year);
    }
)

</script>

<style scoped>
.page-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: all;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.background-map :deep(canvas) {
  width: 100% !important;
  height: 100% !important;
}

.eco-produce-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.title-section {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(180.00deg, rgba(246, 241, 241, 1), rgba(133, 149, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: '优设标题黑', serif;
  font-size: 38px;
  font-weight: 40;
  line-height: 62px;
  letter-spacing: 2px;
}

/* 三列布局 */
.three-columns-layout {
  display: flex;
  height: 100%;
  flex: 1;
}

.column-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许子元素收缩 */
}

.column-middle {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.column-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许子元素收缩 */
}

.right-chart-item {
  flex: 1;
  width: 100%;
  margin-bottom: 10px;
  min-height: 0; /* 允许ECharts容器收缩 */
}

.right-chart-item:last-child {
  margin-bottom: 0;
}

/* 为ECharts组件添加样式以确保正确显示
 .column-left :deep(.right-1-container),
.right-chart-item :deep(.right-1-container) {
  flex: 1;
  width: 100%;
  height: 100%;
}
 */

</style>


